<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>
  
    <script type="text/babel">
        // 错误边界  

        class BugCount extends React.Component{
            state={count:0}

            render(){

                if(this.state.count===5){
                    throw new Error('count error')
                }
                

                return <h1 onClick={()=>{
                    this.setState(({count})=>({count:count+1}))
                }}>{this.state.count}</h1>
            }
        }

        // function App(){
        //     return (
        //         <div>
        //             <h1>app component</h1>
        //             <BugCount />
        //         </div>
        //     )
        // }

        // 场景： 子组件错误 导致应用崩溃
        // 错误边界 ： 是一个组件 捕获子组件错误
        // 需求： 如果子组件错误 =>错误边界捕获 ： 1 应用不能崩溃 2 记录错误日志 3 错误信息显示优化

        // 定义错误边界： 数据（错误数据容器）-捕获子组件错误 - 同步到错误容器
        // 01) 有错误  渲染自定义个错误页面
        // 02） 没错误 直接渲染子组件
        class ErrorBoudary extends React.Component{
            state = {error:null,errorInfo:null}

            //子组件出现错误---react<--钩子函数(error,errorInfo)
            componentDidCatch(error,errorInfo){
                console.log("componentDidCatch");
                console.log(error);
                console.log(errorInfo);

                this.setState({
                    error,
                    errorInfo
                })

            }

            render(){
                const {error,errorInfo} = this.state

                // 有错误  渲染自定义个错误页面
                if(error||errorInfo){

                    return ( // 自定义的错误页面
                        <div>
                            <h1>take it easy</h1>
                            <span>something is wrong</span>
                            <details  style={{whiteSpace:'pre-wrap'}}>
                                {error && error.toString()}
                                <br/>
                                {
                                    errorInfo && errorInfo.componentStack
                                }
                            </details>
                        </div>
                    )

                }else{
                    // 没错误 直接渲染子组件
                    return this.props.children
                }



            }
        }


        // function App(){
        //     return (
        //         <div>
        //             <h1>app component</h1>
        //             <ErrorBoudary >
        //                 <BugCount />
        //             </ErrorBoudary>
        //         </div>
        //     )
        // }


      // <BugCount /> 任何一个错误错误 ，直接渲染ErrorBoudary 定义错误页面=>覆盖所有的子组件
        // function App(){
        //     return (
        //         <div>
        //             <h1>app component</h1>
        //             <ErrorBoudary >
        //                 <BugCount />
        //                 <BugCount />
        //                 <BugCount />
        //             </ErrorBoudary>
        //         </div>
        //     )
        // }


        // 错误独立包裹子组件 ： 互相不影响 各自显示独立ide错误信息
        function App(){
            return (
                <div>
                    <h1>app component</h1>
                    <ErrorBoudary >
                        <BugCount />
                    </ErrorBoudary>
                    <ErrorBoudary >
                        <BugCount />
                    </ErrorBoudary>
                    <ErrorBoudary >
                        <BugCount />
                    </ErrorBoudary>
                </div>
            )
        }

        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>